<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ page import="org.ifilm.util.GeneralConstants"%>

<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Home Page</title>
		<link rel="icon" type="image/png" href="/film/img/favicon.ico">
		<link href="/film/bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen"/>
		<script src="/film/js/jquery.js"></script>
	    <script src="/film/bootstrap/js/bootstrap.min.js"></script>
	    <script src="/film/bootstrap/js/typeahead.js"></script>
	    <style>
	      	body {
	        	padding-top: 60px; /* 60px to make the container go all the way to the bottom of the topbar */
	      	}
	    </style>
	</head>	
	<body>
		 <jsp:include page="navigationBar.jsp"/>			 
		 <div class="container">
			 <div class="content-container">				
				<table class="table" border=0>	
					<tr>
						<td width=60% border=0>
							Job/Role Description sketch
						</td>
						<td border=0>
							Project Name
						</td>
						<td>
						</td>
					</tr>				
					<tr>
						<td width=60% border=0>
							Actor who plays the main role of one of the tremendous ...
						</td>
						<td border=0>
							<a href="">Renkler</a>
						</td>
						<td>
							<div class="btn" style="float:left">Job Details</div> 
							<div class="btn" style="float:right">Apply</div>
						</td>
					</tr>
					<tr>
						<td width=60% border=0>
							A new face to my film I have been searching for ...
						</td>
						<td border=0>
							<a href="">As_i Lezzet</a>
						</td>
						<td>
							<div class="btn" style="float:left">Job Details</div> 
							<div class="btn" style="float:right">Apply</div>
					</td>
					</tr>
					<tr>
						<td width=60% border=0>
							Zengin bir adamın genç karısını oynayacak bayan oyuncu ...
						</td>
						<td border=0>
							<a href="">Camur</a>
						</td>
						<td>
							<div class="btn" style="float:left">Job Details</div> 
							<div class="btn" style="float:right">Apply</div>
					</td>
					</tr>
				</table>			
			 	<div class="pagination pagination-centered">
			 		<ul>
			 			<c:if test="${page == null or page == 1}">
				 			<li><a page="1" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1}">
				 			<li><a page="${page - 1}" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page == null or page == 1 or page == 2}">
				 			<li><a page="1" href="#">1</a></li>
							<li><a page="2" href="#">2</a></li>
							<li><a page="3" href="#">3</a></li>
							<li><a page="4" href="#">4</a></li>
							<li><a page="5" href="#">5</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null and page != 1 and page != 2}">
				 			<li><a page="${page - 2}" href="#">${page - 2}</a></li>
							<li><a page="${page - 1}" href="#">${page - 1}</a></li>
							<li><a page="${page}" href="#">${page}</a></li>
							<li><a page="${page + 1}" href="#">${page + 1}</a></li>
							<li><a page="${page + 2}" href="#">${page + 2}</a></li>
				 		</c:if>
						
						<c:if test="${page == null}">
				 			<li><a page="2" href="#">Prev</a></li>
				 		</c:if>
				 		
				 		<c:if test="${page != null}">
				 			<li><a page="${page + 1}" href="#">Next</a></li>
				 		</c:if>
					</ul>
				</div>
			 </div>
	 	</div>
	</body>
	
	<script type="text/javascript">
	    //TODO according to jobpostings 
	    $(".pagination a").click(function() {
	    	var page = $(this).attr("page");
	    	window.location.href = ("/film/project/listProjects.do?page=" + page + "&max=" + <%=request.getParameter("max")%>);
	    });   
	</script>	
	<script src="/film/js/commonScripts.js"></script>
</html>